<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="walletHeadBatten" style="width: 100%; height: 100%;">
						<view class="tn-gradient-bg__cool-6 tn-bg-image top-font-title"
							style="width: 100%; display: flex;flex-direction: column;align-items: center;">
							<!-- 顶部占位 -->
							<view :style="'height:' + sConf.tH + 'px;'"> </view>

							<!-- 标题 -->
							<view style="padding: 40px 100px;font-size: large;font-weight: bold;color: #fff;"> 成长经验值
							</view>
						</view>
						<scroll-view class="walletSlBlock" scroll-y :style="'height:' + topH + 'px;'"
							@scrolltolower="lastPage">
							<view style="padding: 10px;gap: 5px;display: flex;flex-direction: column;">

								<template v-for="(item, index) in tmpData" :key="index">
									<view @tap="showReqsnInfo(item.order)"
										style="padding: 10px; background-color: #fff;border-radius: 5px;display: flex;align-items: center;justify-content: space-between;">
										<view style="display: flex;flex-direction: column;">
											<text>{{ item.reqsn }}</text>
											<text style="font-size: small;color: #999;">{{ item.create }}</text>
										</view>
										<view class="">
											{{ item.tos }}
										</view>
										<view :class="item.mark > 0 ? 'bull' : 'bear'">
											{{ item.money }}
										</view>
										<view class="base">
											{{ item.amount }}
										</view>
									</view>
								</template>

								<view v-if="tmpData === null || tmpData.length === 0"
									style="padding: 45px 0;background-color: #fff;border-radius: 5px;">
									<tn-empty mode="data"></tn-empty>
								</view>

							</view>
						</scroll-view>

						<!-- 模态窗口 -->
						<tn-popup v-model="showPopup" open-direction="bottom">
							<view class="tn-p-lg">
								<view v-if="popData" style="display: flex;flex-direction: column;gap: 10px;">
									<!--										
								<text>{{popData.child[0].product.cover[0].url}}</text>
								<text>{{popData.child[0].product.name}}</text>
								<text>{{popData.child[0].num}}</text>					
											
								<text>{{popData.pay}}</text>
								<text>{{popData.repay}}</text>					
								-->
									<view style="display: flex;justify-content: space-between;">
										<text>{{ popData.reqsn }}</text>
										<text>{{ popData.created }}</text>
									</view>
									<view style="display: flex;justify-content: space-between;">
										<view style="display: flex;align-items: center;gap: 10px;">
											<tn-avatar :url="sConf.pics + popData.staff.face"></tn-avatar>
											<text>{{ popData.staff.nicename }}</text>
											<tn-icon v-if="popData.staff.gender === 0" name="girl" size="40"
												color="#ff007f"></tn-icon>
											<tn-icon v-if="popData.staff.gender === 1" name="boy" size="40"
												color="#007aff"></tn-icon>
										</view>
										<text :style="'color:' + state.color + ';'">{{ state.name }}</text>
									</view>
									<view class="">
										<tn-photo-album :data="imageData" :column="4"></tn-photo-album>
									</view>
									<view style="display: flex;justify-content: space-around;">
										<text style="text-decoration: line-through;color:#999;">原价：{{
											(popData.fprice / 100).toFixed(2) }}</text>
										<text>会员价：{{ (popData.aprice / 100).toFixed(2) }}</text>
									</view>
									<view v-if="popData.pay">
										<text>支付时间: {{ popData.pay.success_time }}</text>
									</view>
									<view v-if="popData.repay">
										<text>退款时间: {{ popData.repay.success_time }}</text>
									</view>
								</view>
							</view>
						</tn-popup>
						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{ title }}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/common/utils';
export default {
	data() {
		return {
			count: null, // 记录数
			size: 20, // 页大小
			page: 1, // 当前页
			maxPage: 1, // 最大数	
			topH: 0,
			title: '悦君玺 • 重庆',
			sConf: getApp().globalData,
			banner: '/media/images/efc56953-c719-46ec-ad24-1f207516ca9d.jpeg',

			tmpData: [],
			showPopup: false,
			popData: null,
			imageData: null,
			state: null,
		}
	},
	onLoad() {
		console.log('onLoad', 'wallet');
		this.bH = this.sConf.iH - 200 - 100
		this.loadDefData()
	},
	onShow() {

	},
	onReady() {
		console.log('onReady');
		this.designLayout()
	},
	methods: {
		designLayout() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.walletHeadBatten').boundingClientRect();
				query.select('.walletSlBlock').boundingClientRect();
				query.exec((res) => {
					console.log('mallt窗口', this.sConf.iH, res[0].top, res[1].top);
					this.topH = this.sConf.iH - res[1].top - this.sConf.tH + 10;
				});
			})
		},
		/**
		 * 下一页
		 */
		lastPage() {
			console.log('lastPage');
			if (this.page < this.maxPage) {
				this.page++
				this.loadDefData()
			}
		},
		/**
		 * 加载地址数据
		 */
		loadDefData() {
			let host = this.sConf.host + '/weapps/expers/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				page: this.page,
				size: this.size,
				ordering: '-id'
			}
			utils.authenticatorList(host, token, data).then((res) => {
				console.log('钱包明细', res);
				if (res.rescode === 200) {
					if (this.page > 1) {
						this.tmpData = this.tmpData.concat(res.resmsg)
					} else {
						this.tmpData = res.resmsg
					}
					this.count = res.count
					this.size = res.size
					this.maxPage = Math.ceil(res.count / res.size)
				}
			})
		},
		showReqsnInfo(e) {
			// let that = this
			// this.showPopup = !this.showPopup
			// this.popData = e
			// this.state = utils.hasReqsnState(e.status)
			// this.imageData = e.child.map(item => that.sConf.host + (item.product.cover ?? [])[0].url)
		}
	}
}
</script>

<style lang="scss" scoped>
.base {
	color: #007aff;
}

.bull {
	color: #dd524d;
}

.bull::before {
	content: '+';
}

.bear {
	color: #4cd964
}

.bear::before {
	content: '-';
}

.boys::before {
	content: "\9794";
	/* 2642 */
}

.girl::before {
	content: "\9792";
	/* 2640 */
}
</style>